<template>
  <el-dialog  :close-on-click-modal="false"  v-model="dialogFormVisible" :title="title" width="640px">
    <el-form v-loading="formLoading" ref="formRef" :model="form" :rules="rules">
      <el-form-item label="密码" label-width="120" required prop="password" >
        <el-input v-model="form.password" autocomplete="off" maxlength="60"   placeholder="请输入密码"/>
      </el-form-item>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="handleClose" icon="remove">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="suLoading" icon="plus">{{ form.reporter_id?"更新":"保存"}}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {ResetPwd,GetById} from '@/api/reporter.js'
import {list} from '@/api/room.js'
import KVA from '@/utils/kva.js'
import throttle from '@/utils/throttle.js'
const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = reactive({

  password:"",


})

// 弹出标题
const title = ref("添加巡检人员")
const formLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证谷子额
const rules = reactive({

  "password": [{required: true, message: '请输入密码', trigger: 'blur'}],


})
const roomList = ref([])
// 打开修改密码的弹窗
const handleOpen = async (opid) => {
  const res = await list()
  roomList.value = res.data
  // 每次打开头重置
  dialogFormVisible.value = true;
  if(opid){
    title.value = "修改巡检人员"
    formLoading.value =  true;
    const resp = await GetById(opid)
    formLoading.value = false;
    form.reporter_id = resp.data.reporter_id
    title.value = "你正在修改的添加巡检人员ID是【" + form.reporter_id + "】"
  }
}

// 保存用户
const handleSubmit = () => {
  throttle(()=>{
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        suLoading.value = true
        try{
          await ResetPwd(form)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess("修改成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        }catch(ex){
          suLoading.value = false
        }
      }else{
        suLoading.value = false
      }
    })
  },1000)
}

const handleClose = ()=>{
  delete form.reporter_id
  formRef.value.resetFields()
  dialogFormVisible.value = false
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen
})
</script>
